<template>
  <page>
    <div class="an-info">
      <el-row class="an-H" v-loading="loading">
        <el-col :span="12" class="an-H">
          <div class="an-addres">
            <div>收件人：{{infoDate.consignee}}</div>
            <div>手机号：{{infoDate.phone}}</div>
            <div>地址：{{infoDate.address}}</div>
          </div>

          <el-alert
            style="margin: 15px 0"
            v-if="infoDate.customerNotes"
            :title="'用户留言：'+infoDate.customerNotes"
            type="warning"
            :closable="false"
          ></el-alert>

          <div class="an-total">
            <div>
              <span class="an-label">实付款：</span>
              <span class="an-money">
                ￥
                <strong>{{infoDate.totalMoney}}</strong>
              </span>
            </div>
            <div>
              <span class="an-label">运费：</span>
              <span class="an-money">
                ￥
                <strong>{{infoDate.freight}}</strong>
              </span>
            </div>
          </div>

          <div class="an-list">
            <div v-for="item in infoDate.orderDetails" :key="item.id" class="an-list-item">
              <goods-list :tage="item" />
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="an-right">
          <div class="an-info-box">
            <div>
              <span class="an-label">订单编号：</span>
              <strong>{{infoDate.id}}</strong>
            </div>
            <div>
              <span class="an-label">订单状态：</span>
              <strong class="text-red">{{ AUTH.filterState(infoDate.state)}}</strong>
            </div>
            <div>
              <span class="an-label">状态码：</span>
              {{ infoDate.state}}
            </div>
            <div>
              <span class="an-label">下单时间：</span>
              {{infoDate.createTime}}
            </div>
            <div v-if="infoDate.payTime">
              <span class="an-label">付款时间：</span>
              <span class="text-red">{{infoDate.payTime}}</span>
            </div>
            <div v-if="infoDate.deliveryTime">
              <span class="an-label">发货时间：</span>
              <span class="text-red">{{infoDate.deliveryTime}}</span>
            </div>
            <div v-if="infoDate.confirmTime">
              <span class="an-label">确认时间：</span>
              <span class="text-red">{{infoDate.confirmTime}}</span>
            </div>
            <div v-if="infoDate.completeTime">
              <span class="an-label">交易完成时间：</span>
              <span class="text-red">{{infoDate.completeTime}}</span>
            </div>
          </div>

          <div class="an-express" v-if="infoDate.express && infoDate.express.length>0">
            <div class="title">物流信息</div>
            <div v-for="(item,index) in infoDate.express" :key="item.id" class="an-express-item">
              <div>{{index +1}}、</div>
              <div class="an-code">{{item.courierName}}</div>
              <div class="text-index">{{item.courierNumber}}</div>
              <div class="an-delete" @click="deleteExpress(item.id)" v-if="infoDate.state>0">
                <i class="el-icon-error"></i>
              </div>
            </div>
          </div>

          <div v-if="infoDate.remarks" class="an-remarks">
            <div class="an-label">备注:</div>
            <div v-html="AUTH.changeEnter(infoDate.remarks)"></div>
          </div>

          <div class="an-btn-group">
            <template v-if="infoDate.state>0">
              <el-button type="primary" @click="addRemark">{{infoDate.remarks?'修改备注':'添加备注' }}</el-button>
              <el-button type="primary" @click="deliverClick">{{infoDate.state==1100?'发货':'添加快递'}}</el-button>
              <el-button type="danger" @click="closeClick">关闭订单</el-button>
            </template>
            <el-button v-else type="danger" @click="deleteClick">订单删除</el-button>
          </div>
        </el-col>
      </el-row>

      <dialog-remarks
        v-if="visibleRemarks"
        :id="id"
        :remark="infoDate.remarks"
        v-model:isVisible="visibleRemarks"
        @call-back="getData"
      />
      <dialog-express
        v-if="visibleExpress"
        v-model:isVisible="visibleExpress"
        :orderID="id"
        @call-back="getData"
      />
    </div>
  </page>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import page from "@/components/Page/index.vue";
import goodsList from "@/components/GoodsList/index.vue";
import dialogRemarks from "./dialogRemarks/index.vue";
import dialogExpress from "./dialogExpress/index.vue";
import { OrderInfo } from "@/utils/interface";

@Options({
  components: { page, goodsList, dialogRemarks, dialogExpress },
  props: {
    id: {
      // 订单ID
      type: String,
      default: "",
    },
  },
})
export default class goodsSpec extends Vue {
  [x: string]: any;
  data() {
    return {
      loading: false,
      infoDate: {},
      visibleRemarks: false,
      visibleExpress: false,
    };
  }

  mounted() {
    this.getData();
  }

  // 查询数据
  getData() {
    this.loading = true;
    this.API.orderInfo(this.id).then((res: OrderInfo) => {
      this.loading = false;
      this.infoDate = res;
    });
  }

  // 添加备注
  addRemark() {
    this.visibleRemarks = true;
  }

  // 发货
  deliverClick() {
    this.visibleExpress = true;
  }

  // 删除快递
  deleteExpress(id: number) {
    this.$confirm("此操作将永久删除, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.API.deleteExpress(id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getData();
        });
      })
      .catch(() => {});
  }

  // 关闭订单
  closeClick() {
    this.$confirm("确定关闭?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        let nd = {
          id: this.id,
          state: -2000,
        };
        this.API.postOrder(nd).then(() => {
          this.getData();
        });
      })
      .catch(() => {});
  }

  // 删除订单
  deleteClick() {
    this.API.deleteOrder(this.id).then(() => {
      this.$router.push({ path: "/order" });
    });
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/mixin.scss";
.an-info {
  padding-bottom: 60px;
  position: relative;
  height: 100%;
}

.an-addres {
  font-size: 16px;
  padding: 25px;
  background-color: #fdfff1;
  position: relative;
  &::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: -webkit-repeating-linear-gradient(
      135deg,
      #ff6c6c 0,
      #ff6c6c 20%,
      transparent 0,
      transparent 25%,
      #1989fa 0,
      #1989fa 45%,
      transparent 0,
      transparent 50%
    );
    background: repeating-linear-gradient(
      -45deg,
      #ff6c6c 0,
      #ff6c6c 20%,
      transparent 0,
      transparent 25%,
      #1989fa 0,
      #1989fa 45%,
      transparent 0,
      transparent 50%
    );
    background-size: 80px;
    content: "";
  }
}
.an-list {
  height: calc(100% - 200px);
  min-height: 300px;
  overflow: auto;
  .an-list-item {
    margin: 15px 0;
  }
}

.an-total {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}

.an-right {
  padding: 0 30px;
  .an-info-box {
    line-height: 2em;
    margin-bottom: 30px;
  }
}

.an-remarks {
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fdf6ec;
  .an-label {
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    padding-bottom: 10px;
  }
}

.an-express {
  margin-bottom: 15px;
  .an-express-item {
    display: flex;
    justify-items: center;
    padding: 10px 15px;
    line-height: 20px;
    .an-code {
      margin-right: 10px;
    }
    .an-delete {
      color: $color-Danger;
      margin: 0 15px;
      cursor: pointer;
    }
  }
}
</style>